/* eslint-disable react-hooks/exhaustive-deps */

import React, { useState, useEffect, useRef, useMemo } from 'react';
import { useAppSelector, useAppDispatch } from './store/hooks'
import { increment, incrementByAmount, lazyCounterIncr, selectCount } from './store/counterSlice'
import { useQuery, useQueryClient } from 'react-query'
import { useParams } from 'react-router-dom';
 

function Counter() {
  const obj = {name: 1}
  const [count, setCount] = useState(0);
  const ref = useRef(1);
  const inputRef = useRef<HTMLInputElement>(null);
  const countRedux = useAppSelector(selectCount)
  const dispatch = useAppDispatch()

  const { id } = useParams();

  const incRef = () => ref.current++;

  // Get QueryClient from the context
  const queryClient = useQueryClient()

  useEffect(() => {
    inputRef.current!.value = "test"
    inputRef.current?.focus()
  }, [])

  const countRnd = useMemo(() => {
    return Math.random() * ref.current
  }, [ref.current])

  // useEffect(() => {
  //   console.log("=====>", obj)
  //   setCount(c => c + 1)
  // }, [obj])
  // const latestCount = useRef(count);
  // useEffect(() => {
  //   latestCount.current = count;
  //   setTimeout(() => {
  //     console.log(`222You clicked ${latestCount.current} times`);
  //   }, 3000);
  // });

  // useEffect(() => {    document.title = `You clicked ${count} times`;  });
  // useEffect(() => {    setTimeout(() => {      console.log(`1111You clicked ${count} times`);    }, 3000);  });
  // function handleAlertClick() {
  //   setTimeout(() => {
  //     alert('You clicked on: ' + count);
  //   }, 3000);
  // }
  // useEffect(
  //   () => {
  //     console.log("render count effect...", count, Date.now());
  //     const id = setInterval(() => {
  //       console.log("render interval...before", count, Date.now());
  //       setCount(c => c+1);
  //       console.log("render interval...after", count, Date.now());
  //     }, 1000);
  //     return () => { 
  //       console.log("clearInterval...", count);
  //       clearInterval(id);
  //     }
  //   },
  //   []
  // );
  console.log("render count....", count);
  return (
    <div style={{margin: '20px', background: '#efefef'}}>
      <p>Counter 1 You clicked {count} times, { countRnd } </p>
      <button onClick={() => setCount(count + 1)}>
        Click me { id }
      </button>
      <input ref={inputRef} />
      <br />
      {/* <button onClick={handleAlertClick}>Show alert</button> */}
      <button onClick={incRef}>ref.current: {ref.current}</button>
      <br />
      <h3>Redux Counter: { countRedux }</h3>
      <button onClick={() => dispatch(increment())}>increment: + 1</button>&nbsp;&nbsp;
      <button onClick={() => dispatch(incrementByAmount(10))}>increment: + 10</button>&nbsp;&nbsp;
      <button onClick={() => dispatch(lazyCounterIncr(20))}>delay 3s increment: + 120</button>&nbsp;&nbsp;
      <button onClick={() => queryClient.invalidateQueries('repoData')}>clear repoData cache</button>&nbsp;&nbsp;
    </div>
  );
}

Counter.whyDidYouRender = true

export default Counter;